<style type="text/css">{$styleSheet}</style>
<script type="text/javascript">{$javaScript}</script>
{if $showFriends}
<script type="text/javascript">
	showGameElement("friend-codes");
</script>
{/if}

<!-- menu include -->
{include file="menu.tpl"}

<div id="game">

<div id="header"><span class="title">{$game->getTitle()}</span>
<span id="add-to-owned"><img src="{$HOST}/html/images/add.png"/><a href="#">add to owned</a></span> 
<img src="{$HOST}/html/images/add.png"/><a href="#">add to wishlist</a></div>

<div id="game-detail">
<div id="game-image"><img src="{$game->getLargeImageURL()}" /></div>
<div id="game-stats">
<p><b>{$numberOfPlayers}</b> Players <span id="view-friend-codes"><a onClick="showGameElement('friend-codes')" href="#">View Friend Codes</a></span></p>
<p>On <b>{$numberOfWishlists}</b> wishlists</p>
<p>Rating: <span class="blue-text">*COMING SOON*</span></p>
<a href="{$HOST}/external.php?url={$game->getAmazonAssociateURL()}&amp;game-id={$game->getID()}" target="_blank">Buy: {$price}</a>
</div>
</div>

<div id="game-menu">
<ul>
<li id="descriptionTab" onclick="showGameElement('description')">Description</li>
<li id="commentsTab">Comments</li>
<li id="friendCodesTab">Friend Codes</li>
</ul>
</div>

<div id="description" class="gameMenuSections">
<h2>Game Description</h2>
{$game->getDescription()}
</div>

<div id="friend-codes" class="gameMenuSections">
<h2>Players Friend Codes</h2>
<table>
{foreach from=$friends item=f}
  <tr class="user-list">
    <td><img src="{$f->getProfilePicSmallUrl()}" /></td>
    <td><b>{$f->getFirstName()} {$f->getLastName()}</b>
    <br/><span class="small-text">Wii Code:</span> <span class="blue-text">{$f->getWiiCode()}</span></td>
    <td>Friend code for <b>{$game->getTitle()}:</b> 
    <span class="blue-text">{$f->getFriendCode()}</span></td>
 </tr>
{/foreach}
</table>
</div>
